<template>
    <div class="page">
        <div class="page-container">
            <div class="row">
                <div class="left-box">
                    <div class="space-box">
                        <SpaceInfo />
                        <MeiziPieChart :data="typeProportion" />
                    </div>
                    <MeiziLineChart :data="mediaResourceData" />
                </div>
                <div class="right-box">
                    <div class="uer-info">
                        <div class="top-box">
                            <img
                                class="bg"
                                src="@/assets/Lw/user-info-bg.png"
                                alt=""
                            />
                            <div class="info">
                                <div class="left">
                                    <div class="name">刘炜</div>
                                    <div class="position">政企部</div>
                                </div>
                                <div class="right">
                                    上次登录时间：2024-04-28
                                </div>
                            </div>
                        </div>
                        <div class="bottom-box">
                            <div class="item">
                                <div class="name">上传媒资总数</div>
                                <div class="num">44537</div>
                            </div>
                            <div class="item">
                                <div class="name">媒资占用容量</div>
                                <div class="num">550GB</div>
                            </div>
                        </div>
                    </div>
                    <div class="playform">
                        <div class="sub-title">华西媒资库其他平台</div>
                        <div class="tips">不同平台也能用</div>
                        <div class="list">
                            <div class="item">
                                <div class="name">小程序</div>
                                <div class="box">
                                    <div class="img-box">
                                        <img
                                            src="@/assets/Lw/mini-program.png"
                                            alt=""
                                            class="icon"
                                        />
                                        <img class="qrcode" alt="" />
                                    </div>
                                    <div class="txt">使用小程序</div>
                                    <div class="txt1">手机扫码进入小程序</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="name">客户端</div>
                                <div class="box">
                                    <div class="img-box">
                                        <img
                                            src="@/assets/Lw/client.png"
                                            alt=""
                                        />
                                    </div>
                                    <div class="txt">点击下载客户端</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <RecentOperate />
        </div>
    </div>
</template>

<script setup lang="ts">
    import workBenchService from "@/service/workBench.service";
    import SpaceInfo from "./comps/SpaceInfo/SpaceInfo.vue";
    import MeiziPieChart from "./comps/MeiziPieChart/MeiziPieChart.vue";
    import MeiziLineChart from "./comps/MeiziLineChart/MeiziLineChart.vue";
    import RecentOperate from "./comps/RecentOperate/RecentOperate.vue";

    import dayjs from "dayjs";
    onMounted(() => {
        getMediaResourceData();
        getTypeProportion();
    });

    // 入库动态

    const mediaResourceData = ref();
    const getMediaResourceData = async () => {
        let endTime = dayjs().format("YYYY-MM-DD");
        let startTime = dayjs(endTime).subtract(6, "day").format("YYYY-MM-DD");
        let res = await workBenchService.mediaResourceData(startTime, endTime);
        let data = res.data.result.data || [];
        mediaResourceData.value = data;
    };

    // 媒资类别占比
    const typeProportion = ref();
    const getTypeProportion = async () => {
        let res = await workBenchService.typeProportion();
        let data = res.data.result.data || [];
        typeProportion.value = data;
    };
</script>

<style lang="scss" scoped src="./WorkBench.scss"></style>
